﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head th:fragment="head">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta content="" name="description"/>
    <meta content="webthemez" name="author"/>
    <title>BRILLIANT Free Bootstrap Admin Template</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" th:href="@{/assets/css/bootstrap.css}"/>
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" th:href="@{/assets/css/font-awesome.css}"/>
    <!-- Morris Chart Styles-->
    <!--<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet"-->
    <!--th:href="@{/assets/js/morris/morris-0.4.3.min.css}"/>-->
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" th:href="@{/assets/css/custom-styles.css}"/>
    <!-- Google Fonts-->
    <!--<link href='http://fonts.useso.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>-->
    <link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css"
          th:href="@{/assets/js/Lightweight-Chart/cssCharts.css}">
    <link href="assets/css/jeDate-test.css" rel="stylesheet" th:href="@{/assets/css/jeDate-test.css}"/>
    <link href="assets/css/jedate.css" rel="stylesheet" th:href="@{/assets/css/jedate.css}"/>
    <link href="assets/js/dataTables/dataTables.bootstrap.css"
          th:href="@{/assets/js/dataTables/dataTables.bootstrap.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="../static/ztree/css/zTreeStyle.css"
          th:href="@{/ztree/css/zTreeStyle.css}"/>
    <style>
        fieldset {
            padding: .35em .625em .75em;
            margin: 0 2px;
            border: 1px solid silver
        }

        legend {
            padding: .5em;
            border: 0;
            width: auto
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .row{
            margin-left: 0;
            margin-right: 0;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="main.html"><strong><i class="icon fa fa-plane"></i> BRILLIANT</strong></a>

            <div id="sideNav" href="">
                <i class="fa fa-bars icon"></i>
            </div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-messages">
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Doe</strong>
                                <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                            </div>
                            <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>Read All Messages</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-messages -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-tasks">
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 1</strong>
                                    <span class="pull-right text-muted">60% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (success)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 2</strong>
                                    <span class="pull-right text-muted">28% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 28%">
                                        <span class="sr-only">28% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 3</strong>
                                    <span class="pull-right text-muted">60% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 4</strong>
                                    <span class="pull-right text-muted">85% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                                        <span class="sr-only">85% Complete (danger)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Tasks</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-tasks -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-comment fa-fw"></i> New Comment
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                <span class="pull-right text-muted small">12 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-envelope fa-fw"></i> Message Sent
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-tasks fa-fw"></i> New Task
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Alerts</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul th:replace="org/org_index::tree"></ul>
        </div>
    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper" class="right_col" role="main" style="min-height:920px">
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>菜单
                            <small>新增/修改</small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <!--<div class="col-md-5">-->
                <!--<div class="x_panel ">-->
                    <!--<fieldset>-->
                        <!--<legend>组织机构树</legend>-->
                        <!--<ul class="ztree" id="tree"></ul>-->
                        <!--<p style="display: none">-->
                            <!--<input type="checkbox" id="py" class="checkbox first" checked="checked"/>-->
                            <!--<input type="checkbox" id="sy" class="checkbox first" checked="checked"/>-->
                            <!--<input type="checkbox" id="pn" class="checkbox first" checked="checked"/>-->
                            <!--<input type="checkbox" id="sn" class="checkbox first" checked="checked"/>-->
                        <!--</p>-->
                    <!--</fieldset>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div style="float:left;width: 1px;height: 850px; background: #000;"></div>-->
            <div class="col-md-12" style="margin-top: 20px">
                <div class="x_panel">
                    <div class="x_content" style="background-color: white; border: 1px solid black">
                        <br>
                        <form id="menuForm" data-parsley-validate="" class="form-horizontal form-label-left" novalidate="">
                            <!--<input type="hidden" id="orgId" name="orgId">-->
                            <!--<input type="hidden" id="parentOrgId" name="parentOrgId">-->
                            <!--<input type="hidden" id="parentOrgName" name="parentOrgName">-->
                            <!--<div class="form-group">-->
                                <!--<label class="control-label col-md-3 col-sm-3 col-xs-12" for="parentOrgId">上级部门</label>-->
                                <!--<div class="col-md-7 col-sm-6 col-xs-12">-->
                                    <!--<select onchange="pOrg(this)" class="form-control" required="">-->
                                        <!--<option value="0">请选择</option>-->
                                        <!--<option value="" th:value="${data.id}" th:text="${data.name}"-->
                                                <!--th:each="data : ${zTree}">Choose..-->
                                        <!--</option>-->
                                    <!--</select>-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="form-group">
                                <label class="control-label col-md-3" for="restaurant">饭店</label>
                                <div class="col-md-7">
                                    <select class="col-md-7 btn btn-default dropdown" id="restaurant" name="restaurant_id">
                                    <!--<option value="-1">-全选-</option>-->
                                    <option th:each="st: ${restaurantList}" th:value="${st?.restaurantId}"
                                    th:text="${st?.restaurantName}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3" for="dishname">菜名</label>
                                <div class="col-md-7">
                                    <input type="text" id="dishname" name="dishname" required="required"
                                           oninvalid="setCustomValidity('请输入角色编码');" class="form-control"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3" for="price">单价</label>
                                <div class="col-md-7">
                                    <input type="text" id="price" name="price" required="required"
                                           oninvalid="setCustomValidity('请输入角色编码');" class="form-control"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3" for="cdate">时间</label>
                                <div class="col-md-7">
                                    <input type="text" id="cdate" name="cdate" required="required"
                                           oninvalid="setCustomValidity('请输入角色编码');" class="form-control"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3" for="sts">状态</label>
                                <select class="col-md-7 btn btn-default dropdown" id="sts" name="sts">
                                    <option value="1">启用</option>
                                    <option value="0">弃用</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <div class="col-md-7 col-sm-6 col-xs-12 col-md-offset-3">
                                    <button class="btn btn-primary" id="btnAdd" type="button" onclick="saveMenu()">新增</button>
                                </div>
                            </div>

                        </form>
                        <br>
                    </div>
                    <div class="x_content"  style="background-color: white; border: 1px solid black; margin-top: 40px">
                        <div class="panel-body">
                            <div class="table-responsive table-bordered">
                                <table class="table">
                                    <thead >
                                    <tr>
                                        <th>#</th>
                                        <th>任务名称</th>
                                        <th>创建时间</th>
                                        <th>项目名</th>
                                        <th>组长</th>
                                        <th>操作</th>

                                    </tr>
                                    </thead>
                                    <tbody class="result">
                                    <tr th:each="task,iterStat: ${menuList}">
                                        <td th:text="${iterStat.index}+1"></td>
                                        <td th:text="${task.dishname}"></td>
                                        <td th:text="${task.price}"></td>
                                        <td th:text="${task.restaurant}"></td>
                                        <td th:text="${task.cdate!=null}?${#dates.format(task.cdate,'yyyy-MM-dd HH:mm:ss')}:''"></td>
                                        <td><button class="btn btn-primary" th:id="${task.menuId}" onclick="deleMenu(this)" type="button">删除
                                        </button></td>
                                    </tr>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js" th:src="@{/assets/js/jquery-1.10.2.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    //树的数据
    var vaodes = eval([[${zTree}]]);
    function zTreeOnClick(event, treeId, treeNode) {
        $("#pOrgName").attr("disabled", "disabled");
        $("#find").show();
        $("#btnAdd").hide();
        $.getJSON('/org/getOrg/' + treeNode.id, function (result) {
            $("#orgId").val(result.orgId);
            $("#orgName").val(result.orgName);
            $("#parentOrgName").val(result.parentOrgName);
            $("#parentOrgId").val(result.parentOrgId);
            $("#pOrgName").val(result.parentOrgId);
        });
        $("#btnEdt").removeAttr("disabled");
        $("#btnDel").removeAttr("disabled");
    };
    var setting = {
        callback: {
            onClick: zTreeOnClick
        },
        check: {
            enable: false,
            chkStyle: "radio"
        },
        data: {//数据加载
            keep: {
                parent: true,
                leaf: true
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId"
            },
            key: {
                name: "name"
            }
        }
    };

    $(document).ready(function () {
        var treeObj = $.fn.zTree.init($("#tree"), setting, vaodes);
        treeObj.expandAll(true);
    });
    function pOrg(obj) {
        $("#parentOrgName").val($(obj).find("option:selected").text());
        $("#parentOrgId").val($(obj).val());
    }
    $(function () {
        $("#cdate").jeDate({
            format: "YYYY-MM-DD hh:mm:ss"
        });
    });
    var menuList = [[${menuList}]];
    console.log(menuList);
    var restaurantList  = [[${restaurantList}]];
    console.log(restaurantList);
    /*]]>*/
</script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/;
    function saveMenu() {//新增数据接口调用
        var menuSave = $("#menuForm").serialize();
            $.post("/menu/saveMenu", menuSave, function (result) {
                alert(result);
//                findOrg();
            });
    }
    function deleMenu(obj) {
        var orderId = $(obj).attr("id");
        console.log("orderId", orderId);
    }
    function deleOrg() {//删除一条数据：逻辑删除为不可用状态
        var orgId = $("#orgId").val();
        $.post('/org/deleteOrg/',{"orgId":orgId}, function (result) {
            alert(result);
            findOrg();
        });
    }
    function editOrg() {//修改数据接口调用
        var roleSaveAndFlush = $("#orgForm").serialize();
        var orgName = $("#orgName").val();
        if(orgName == null || orgName == ""){
            alert("请输入部门名称");
        }else{
            $.post("/org/updateOrg", roleSaveAndFlush, function (result) {
                alert(result);
                findOrg();
            });
        }
    }
    function findOrg() {
        window.location.reload();
    }
    /*]]>*/
</script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js" th:src="@{/assets/js/bootstrap.min.js}"></script>
<script src="../../static/assets/js/jquery.jedate.js" th:src="@{/assets/js/jquery.jedate.js}"></script>

<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js" th:src="@{/assets/js/jquery.metisMenu.js}"></script>

<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"
        th:src="@{/assets/js/dataTables/jquery.dataTables.js}"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"
        th:src="@{/assets/js/dataTables/dataTables.bootstrap.js}"></script>
<script src="myjs.js" th:inline="javascript"
        th:src="@{/myjs.js}"></script>
<script src="echarts.js" th:src="@{/echarts.js}"></script>

<!-- Morris Chart Js -->
<!--<script src="assets/js/morris/raphael-2.1.0.min.js" th:src="@{/assets/js/morris/raphael-2.1.0.min.js}"></script>-->
<!--<script src="assets/js/morris/morris.js" th:src="@{/assets/js/morris/morris.js}"></script>-->

<script src="assets/js/easypiechart.js" th:src="@{/assets/js/easypiechart.js}"></script>
<script src="assets/js/easypiechart-data.js" th:src="@{/assets/js/easypiechart-data.js}"></script>
<script src="assets/js/Lightweight-Chart/jquery.chart.js"
        th:src="@{/assets/js/Lightweight-Chart/jquery.chart.js}"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js" th:src="@{/assets/js/custom-scripts.js}"></script>
<!-- Chart Js -->
<script type="text/javascript" src="assets/js/Chart.min.js" th:src="@{/assets/js/Chart.min.js}"></script>
<script type="text/javascript" src="assets/js/chartjs.js" th:src="@{/assets/js/chartjs.js}"></script>
<!--<script type="text/javascript" src="../../static/js/prompt.js" th:src="@{/js/prompt.js}"></script>-->
<script src="../static/ztree/js/jquery.ztree.core.js"
        th:src="@{/ztree/js/jquery.ztree.core.js}" type="text/javascript" charset="utf-8"></script>
<script src="../static/ztree/js/jquery.ztree.excheck.js"
        th:src="@{/ztree/js/jquery.ztree.excheck.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../static/ztree/js/jquery.ztree.core.js"
        th:src="@{/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" src="../static/ztree/js/jquery.ztree.excheck.js"
        th:src="@{/ztree/js/jquery.ztree.excheck.js}"></script>
</body>
</html>